import { loginAction } from '@/store/modules/login'
import { Card, Form, Input, Button, Checkbox, message } from 'antd'
import { useDispatch } from 'react-redux' //从store中获取dispatch方法数据引用
import { useLocation } from 'react-router-dom' //监听url地址变化
import { useNavigate } from 'react-router-dom' //路由跳转
import logo from '../../assets/logo.png'
import './index.scss'

function Login() {
  const dispatch = useDispatch()
  const lacation = useLocation()
  const navigate = useNavigate()
  //表单
  const onFinish = async (values) => {
    console.log('Success:', values)
    //发请求登录
    // dispatch(loginAction(values))
    try {
      await dispatch(loginAction(values))
      message.success('登录成功')
      navigate(lacation.state?.fromsss || '/') //携带上次地址到fromsss
      console.log('location', lacation)
    } catch (error) {
      console.dir(error)
      message.error(error.response.data.message)
    }
  }

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }
  //函数协议校验
  const validateAgree = (_, value) =>
    value ? Promise.resolve() : Promise.reject(new Error('请勾选用户协议'))

  return (
    <div className="login">
      <Card className="login-container">
        <img className="login-logo" src={logo} alt="" />
        <Form
          // name="basic"
          labelCol={
            {
              //span: 6, //文字部分宽度6
              //offset: 3,//向右移动3
            }
          }
          wrapperCol={{
            span: 24, //input部分
          }}
          initialValues={{
            //指定表单项默认值
            mobile: '13911111111',
            code: '246810',
            agree: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          //autoComplete="off" //关闭记录

          // 指定校验触发时机的集合
          validateTrigger={['onBlur', 'onChange']} //失去焦点和发生变化
        >
          <Form.Item
            // label="Username"
            name="mobile"
            rules={[
              {
                required: true,
                message: '请输入手机号',
              },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '手机号码格式不对',
                // validateTrigger: 'onBlur',
              },
            ]}
          >
            <Input size="large" placeholder="请输入手机号" />
          </Form.Item>

          <Form.Item
            // label="Password"
            name="code"
            rules={[
              {
                required: true,
                message: '请输入验证码',
              },
              {
                len: 6,
                message: '请输入6位验证码',
              },
            ]}
          >
            <Input.Password
              size="large"
              placeholder="请输入验证码"
              maxLength={6}
            />
          </Form.Item>

          <Form.Item
            name="agree"
            valuePropName="checked"
            wrapperCol={{
              offset: 2,
              span: 20,
            }}
            rules={[
              {
                validator: validateAgree,
              },
            ]}
          >
            <Checkbox>我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
          </Form.Item>

          <Form.Item
            wrapperCol={{
              offset: 0,
              span: 24,
            }}
          >
            {/* 将宽度调整为父元素宽度的选项block */}
            <Button type="primary" size="large" block htmlType="submit">
              轻轻一点
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
export default Login
